<template>
    <div class="box">
        <div class="title">
            <strong>{{ $t("index-account.M001") }}</strong>
            <div class="wx-box">
                <span class="bind-wx"></span>
                <div class="layer"
            </div>
            <router-link to="/account" class="aclink">{{ $t("index-account.M002") }}+</router-link>
        </div>
        <div class="access-panel">
            <table cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td width="20%">
                            <div class="com-icon">GW Plus
                                <br/>{{ $t("index-account.M003") }}</div>
                        </td>
                        <td width="15%" class="text-center">88000841</td>
                        <td width="15%" class="mini">
                            <div><i class="icon-que"></i>{{ $t("index-account.M004") }}</div>
                            <p>{{ $t("index-account.M005") }}</p>
                        </td>
                        <td width="15%" class="actived">
                            <div>{{ $t("index-account.M006") }}</div>
                            <p>{{ $t("index-account.M008") }}</p>
                        </td>
                        <td width="15%" class="money">
                            <div>3977.00</div>
                            <p>{{ $t("index-account.M009") }}({{ $t("currency.usd") }})</p>
                        </td>
                        <td width="20%" class="text-center">
                            <router-link to="/access" tag="div" class="clearfix btn-access">
                                {{ $t("index-account.M010") }}
                                <div><i class="icon-arrow-down-sx"></i></div>
                            </router-link>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="access-panel">
            <table cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td width="20%">
                            <div class="com-icon">MT4
                                <br/>{{ $t("index-account.M003") }}</div>
                        </td>
                        <td width="15%" class="text-center">88000841</td>
                        <td width="15%" class="mini">
                            <div><i class="icon-que"></i>{{ $t("index-account.M004") }}</div>
                            <p>{{ $t("index-account.M005") }}</p>
                        </td>
                        <td width="15%" class="actived">
                            <div>{{ $t("index-account.M007") }}</div>
                            <p>{{ $t("index-account.M008") }}</p>
                        </td>
                        <td width="15%" class="money">
                            <div>3977.00</div>
                            <p>{{ $t("index-account.M009") }}({{ $t("currency.usd") }})</p>
                        </td>
                        <td width="20%" class="text-center">
                            <router-link to="/access" tag="div" class="clearfix btn-access">
                                {{ $t("index-account.M010") }}
                                <div><i class="icon-arrow-down-sx"></i></div>
                            </router-link>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<style scoped>
.wx-box {
    display: inline-block;
}

.icon-que {
    margin-right: 5px;
}

.title {
    position: relative;
}

.aclink {
    position: absolute;
    right: 10px;
    top: 5px;
}

.btn-access {
    width: 126px;
    border: 1px #c6a150 solid;
    background-color: #c6a150;
    color: #fff;
    font-weight: normal;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    line-height: 38px;
    cursor: pointer;

    div {
        background-color: #f8efdc;
        float: right;
        width: 50px;
        height: 38px;
    }
}

.box {
    padding: 20px;
    background-color: #fff;
    font-size: 14px;
    margin-top: 10px;
}

.mini {
    div {
        margin-left: 20px;
    }

    p {
        margin-left: 35px;
        padding-top: 5px;
    }
}

.actived {
    div,
    p {
        margin-left: 20px;
    }

    p {
        padding-top: 5px;
    }
}

.money {
    div,
    p {
        margin-left: 20px;
    }

    p {
        padding-top: 5px;
    }

    div {
        color: #f00;
    }
}

.bind-wx {
    display: inline-block;
    width: 194px;
    height: 40px;
    vertical-align: middle;
    margin-left: 10px;
    background-image: url(../../../../static/images/onekey-bind-weixin.gif);
}

.access-panel {
    width: 100%;
    margin-top: 20px;
    background-color: #f5f0e6;
    padding: 15px 0 20px 0;

    table {
        width: 100%;
        font-size: 20px;
        color: #98752a;
        font-weight: bold;

        p {
            font-size: 14px;
            color: #666;
            font-weight: normal;
        }

        td {
            height: 80px;
            vertical-align: middle;
        }
    }
}

.com-icon {
    background-image: url(../../../../static/images/com-icon.png);
    background-repeat: no-repeat;
    font-weight: normal;
    padding-left: 50px;
    margin-left: 30px;
}
</style>